CSS @media: Geavanceerde Media Query Patronen voor een Echt Responsief Web

In het dynamische landschap van moderne webontwikkeling is het creëren van ervaringen die zich naadloos aanpassen aan een steeds groter wordende reeks apparaten en gebruikerscontexten niet alleen een best practice – het is een absolute noodzaak. Van hoge-resolutie desktopmonitoren tot compacte smartphones, van gebruikers in drukke stadscentra met snel internet tot die in afgelegen gebieden met beperkte bandbreedte, en van individuen die de voorkeur geven aan donkere thema's tot degenen die verminderde beweging vereisen, het web moet flexibel zijn. Dit is waar CSS @media-regels, de hoeksteen van responsief ontwerp, hun basis-toepassing overstijgen om krachtige tools voor geavanceerde aanpasbaarheid te worden.

Hoewel veel ontwikkelaars bekend zijn met het gebruik van @media voor eenvoudige breakpoint-aanpassingen, ligt de ware kracht in de geavanceerde patronen, logische operatoren en de mogelijkheid om in te spelen op gebruikers- en omgevingsvoorkeuren. Deze uitgebreide gids neemt je mee voorbij de basis en verkent de complexe wereld van geavanceerde mediaquery-functies die je in staat stellen om echt veerkrachtige, inclusieve en wereldwijd toegankelijke webapplicaties te bouwen.

We zullen dieper ingaan op technieken waarmee je ontwerpen niet alleen reageren op schermgrootte, but ook op de capaciteiten van het apparaat, toegankelijkheidsinstellingen van de gebruiker en zelfs de omgeving, wat zorgt voor een superieure ervaring voor elke gebruiker, overal.

De Basis: Een Korte Samenvatting van de Basis @media Syntaxis

Voordat we in de geavanceerde patronen duiken, laten we snel de basis opnieuw vaststellen. Een basis-mediaquery bestaat uit een optioneel mediatype (zoals screen, print, all) en een of meer media-features (zoals min-width, orientation). De stijlen binnen het @media-blok worden alleen toegepast als aan de voorwaarden is voldaan.

            /* Basisvoorbeeld: Stijlen worden alleen toegepast op schermen breder dan 768px */
@media screen and (min-width: 768px) {
  body {
    padding: 20px;
  }
}

/* Stijlen worden alleen toegepast bij het afdrukken van de pagina */
@media print {
  nav {
    display: none;
  }
}

            

              
                Copy
              
            
          

Dit fundamentele begrip is cruciaal, omdat geavanceerde patronen hier direct op voortbouwen.

Voorbij Breakpoints: Inzicht in Media Query Features

Hoewel width en height de meest gebruikte media-features zijn, maakt een rijke set van andere features veel genuanceerdere ontwerpbeslissingen mogelijk. Het begrijpen van deze mogelijkheden is de sleutel tot het overstijgen van generieke mobiel/tablet/desktop-layouts.

Viewport-Gebaseerde Features (De Gebruikelijke Verdachten en Meer)

Deze features hebben betrekking op de afmetingen en kenmerken van de viewport van de browser, niet op het scherm van het fysieke apparaat.

• width, height, min-width, max-width, min-height, max-height: Dit zijn de steunpilaren van responsief ontwerp. Ze stellen je in staat om breakpoints te definiëren op basis van het zichtbare gebied van de browser. Je kunt bijvoorbeeld een lay-out met één kolom veranderen in een lay-out met meerdere kolommen wanneer min-width een bepaalde pixelwaarde bereikt.

            /* Pas een lay-out met twee kolommen toe op bredere schermen */
@media (min-width: 900px) {
  .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
}

            

              
                Copy
              
            
          

• aspect-ratio, min-aspect-ratio, max-aspect-ratio: Deze features stellen je in staat om ontwerpen te richten op basis van de verhouding tussen de breedte en de hoogte van de viewport. Dit is ongelooflijk handig voor het optimaliseren van content voor verschillende schermvormen, van ultrabrede monitoren tot hoge smartphones.

            /* Optimaliseer de hero-afbeelding voor ultrabrede schermen (bijv. 21/9) */
@media (min-aspect-ratio: 16/9) {
  .hero-banner {
    height: auto;
    max-height: 400px;
    object-fit: cover;
  }
}

            

              
                Copy
              
            
          

• orientation: Deze feature detecteert of de viewport in portrait (hoogte is groter dan of gelijk aan breedte) of landscape (breedte is groter dan hoogte) modus is. Het is vooral van vitaal belang voor mobiele en tablet-ervaringen.

            /* Pas de lay-out aan voor landschapsoriëntatie op tablets */
@media screen and (min-width: 768px) and (orientation: landscape) {
  .gallery {
    grid-template-columns: repeat(4, 1fr);
  }
}

            

              
                Copy
              
            
          

Apparaat-Gebaseerde Features (Minder Gebruikelijk, Toch Nuttig)

Deze features hebben betrekking op de kenmerken van het fysieke uitvoerapparaat. Hoewel viewport-gebaseerde queries over het algemeen de voorkeur hebben voor content-lay-out, hebben apparaat-gebaseerde features specifieke niches.

• device-width, device-height (en hun min/max varianten): Historisch gezien werden deze gebruikt om specifieke apparaatresoluties te targeten. Echter, met variabele browservenstergroottes op desktops en tablets, en verschillende pixeldichtheden, kan het vertrouwen op deze features onbetrouwbaar zijn voor de algemene lay-out. De viewport-afmetingen zijn bijna altijd geschikter. Ze kunnen nog steeds worden overwogen in zeer specifieke scenario's, zoals applicaties die specifiek zijn ontworpen voor schermen met een vaste grootte zoals kiosken, maar deze zijn zeldzaam in de typische webontwikkeling.
• resolution: Deze feature stelt je in staat om displays te targeten op basis van hun pixeldichtheid (DPI of DPX – dots per pixel). Dit is cruciaal voor het aanbieden van afbeeldingen van hoge kwaliteit aan "Retina"- of high-DPI-schermen zonder onnodig grote bestanden te leveren aan standaard displays.

            /* Lever een achtergrondafbeelding met een hogere resolutie voor high-DPI-schermen */
@media (min-resolution: 192dpi), (min-resolution: 2dppx) {
  .logo {
    background-image: url('logo@2x.png');
    background-size: contain;
  }
}

            

              
                Copy
              
            
          

Let op het gebruik van zowel dpi als dppx om verschillende browserinterpretaties te dekken en je code toekomstbestendig te maken. dppx (dots per pixel unit) heeft over het algemeen de voorkeur omdat het meer apparaatonafhankelijk is.

Logische Operatoren: Voorwaarden Combineren met Precisie

Om echt geavanceerde media-queries te bouwen, moet je meerdere voorwaarden combineren met behulp van logische operatoren. Hiermee kun je exact specificeren wanneer een set stijlen moet worden toegepast.

`and` Operator: Alle Voorwaarden Moeten Waar Zijn

Het and-sleutelwoord combineert meerdere media-features of mediatypes en features. Alle gespecificeerde voorwaarden moeten waar zijn om de stijlen toe te passen.

            /* Pas stijlen alleen toe op schermen tussen 768px en 1024px breed */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .sidebar {
    order: 2;
  }
  .main-content {
    width: 70%;
  }
}

            

              
                Copy
              
            
          

Dit is uiterst nuttig voor het targeten van specifieke apparaatbereiken, zoals tablets in portretmodus, of voor het creëren van zeer aangepaste lay-outs voor zeer specifieke schermafmetingen.

`or` Operator (`, ` komma-gescheiden): Elke Voorwaarde Kan Waar Zijn

In CSS @media-regels fungeert een komma (`,`) als een logische OR. Als een van de door komma's gescheiden media-queries waar is, worden de bijbehorende stijlen toegepast.

            /* Stijlen worden toegepast als het scherm breder is dan 1200px OF als het apparaat in landschapsoriëntatie is (ongeacht de breedte) */
@media screen and (min-width: 1200px), screen and (orientation: landscape) {
  .header-nav {
    display: flex;
    flex-direction: row;
  }
}

/* Stijlen worden toegepast voor printmedia OF voor schermen met een minimale resolutie */
@media print, (min-resolution: 2dppx) {
  img {
    image-rendering: -webkit-optimize-contrast; /* Voor betere weergave bij print/hoge resolutie */
  }
}

            

              
                Copy
              
            
          

Deze krachtige functie stelt je in staat om stijlen te groeperen die onder meerdere afzonderlijke voorwaarden moeten worden toegepast, wat leidt tot beknoptere en beter leesbare stylesheets.

`not` Operator: Een Voorwaarde Omkeren

Het not-sleutelwoord negeert een volledige media-query, wat betekent dat de stijlen worden toegepast als de gespecificeerde voorwaarde niet waar is.

            /* Pas stijlen toe op alle mediatypes BEHALVE print */
@media not print {
  .interactive-element {
    cursor: pointer;
  }
}

/* Pas stijlen toe als het GEEN scherm is met een minimale breedte van 768px (d.w.z. voor print of schermen kleiner dan 768px) */
@media not screen and (min-width: 768px) {
  .desktop-only-feature {
    display: none;
  }
}

            

              
                Copy
              
            
          

De not-operator kan lastig zijn en moet met beleid worden gebruikt. Zorg ervoor dat je de reikwijdte begrijpt van wat wordt genegeerd. Bijvoorbeeld, @media not screen and (min-width: 768px) betekent "niet een scherm EN min-width 768px", wat logisch equivalent is aan "als het geen scherm is OF als het een scherm is EN de max-width kleiner is dan 768px". Het is vaak duidelijker om max-width te gebruiken in plaats van not min-width.

`only` Sleutelwoord: Zorgen voor Achterwaartse Compatibiliteit (Historische Context)

Het only-sleutelwoord werd geïntroduceerd om stylesheets te verbergen voor oudere browsers die media-queries niet volledig ondersteunden. Als een oudere browser @media only screen tegenkwam, negeerde deze de regel meestal omdat het only niet herkende als een geldig mediatype. Moderne browsers parsen het correct. Gezien de wijdverbreide browserondersteuning voor media-queries vandaag de dag, is only grotendeels overbodig voor nieuwe ontwikkeling, maar het kan nog steeds worden gezien in legacy codebases.

            /* Voorbeeld: Stijlen alleen toegepast op schermen, verborgen voor zeer oude browsers */
@media only screen and (min-width: 992px) {
  .some-component {
    padding: 30px;
  }
}

            

              
                Copy
              
            
          

Media Features voor Gebruikersvoorkeuren: Inclusiviteit en Toegankelijkheid Omarmen

Dit zijn misschien wel de meest opwindende en impactvolle geavanceerde mediaquery-features, omdat ze ontwikkelaars in staat stellen om direct te reageren op de voorkeuren van gebruikers op besturingssysteem- of browserniveau, wat leidt tot aanzienlijk toegankelijkere en gebruiksvriendelijkere ervaringen. Dit is vooral belangrijk voor een wereldwijd publiek met diverse behoeften en omgevingen.

prefers-color-scheme: Lichte en Donkere Modi

Deze feature detecteert of de gebruiker een licht of donker kleurenthema heeft aangevraagd voor zijn besturingssysteem of user agent. Het implementeren van een donkere modus verbetert de toegankelijkheid en het comfort aanzienlijk, met name in omgevingen met weinig licht of voor gebruikers met lichtgevoeligheid.

• no-preference: Geen voorkeur aangegeven door de gebruiker.
• light: Gebruiker geeft de voorkeur aan een licht thema.
• dark: Gebruiker geeft de voorkeur aan een donker thema.

            /* Standaard (licht) thema */
body {
  background-color: #ffffff;
  color: #333333;
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: #1a1a1a;
    color: #f0f0f0;
  }
  a {
    color: #66ccff;
  }
}

            

              
                Copy
              
            
          

Voor robuustere implementaties van de donkere modus zijn CSS Custom Properties (variabelen) van onschatbare waarde, omdat ze je in staat stellen om kleurenpaletten dynamisch te definiëren.

prefers-reduced-motion: Respect voor het Comfort van de Gebruiker

Animaties en overgangen kunnen de gebruikerservaring verbeteren, maar voor sommige individuen (bijv. degenen met vestibulaire stoornissen, ADHD, of gewoon degenen die beweging afleidend vinden) kunnen ze ongemak of zelfs misselijkheid veroorzaken. Deze feature detecteert of de gebruiker heeft gevraagd om minimale niet-essentiële animaties.

• no-preference: Geen voorkeur aangegeven.
• reduce: Gebruiker geeft de voorkeur aan verminderde beweging.

            /* Standaard animatie */
.animated-element {
  transition: transform 0.3s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .animated-element {
    transition: none;
    animation: none;
  }
  .hero-carousel {
    scroll-behavior: auto; /* Schakel vloeiend scrollen uit */
  }
}

            

              
                Copy
              
            
          

Het is een sterke best practice voor toegankelijkheid om altijd een alternatief met verminderde beweging te bieden. Dit helpt bij het bouwen van een web dat voor iedereen bruikbaar en comfortabel is, ongeacht hun individuele gevoeligheden.

prefers-contrast: Visueel Contrast Aanpassen

Deze feature detecteert of de gebruiker een specifiek contrastniveau heeft aangevraagd voor zijn besturingssysteem. Dit is zeer gunstig voor gebruikers met slechtziendheid of bepaalde kleurwaarnemingsstoornissen.

• no-preference: Geen voorkeur.
• less: Gebruiker geeft de voorkeur aan minder contrast.
• more: Gebruiker geeft de voorkeur aan meer contrast.
• custom: Gebruiker heeft een aangepaste contrastinstelling (minder gebruikelijk).

            /* Stijlen voor verhoogd contrast */
@media (prefers-contrast: more) {
  body {
    background-color: #000000;
    color: #FFFFFF;
  }
  button {
    border: 2px solid #FFFFFF;
    background-color: #333333;
    color: #FFFFFF;
  }
}

            

              
                Copy
              
            
          

Door stijlen aan te bieden voor verschillende contrastvoorkeuren, draag je actief bij aan een meer toegankelijke en inclusieve digitale omgeving voor gebruikers wereldwijd.

forced-colors: Omgaan met door het Systeem Opgelegde Kleurenpaletten

Wanneer een besturingssysteem (zoals de Windows-modus voor hoog contrast) een specifiek kleurenpalet op applicaties afdwingt, kan dit soms aangepaste webontwerpen overschrijven of breken. De forced-colors media-feature helpt ontwikkelaars zich aan te passen aan dit scenario, waardoor ze stijlen kunnen aanbieden die goed werken binnen de opgelegde kleurbeperkingen.

• active: De user agent heeft een actieve modus voor gedwongen kleuren.
• none: Er is geen modus voor gedwongen kleuren actief.

            /* Aanpassingen voor gebruikers van de modus voor hoog contrast */
@media (forced-colors: active) {
  /* Zorg ervoor dat elementen zichtbare randen hebben */
  button, input[type="submit"] {
    border: 1px solid currentColor;
    background-color: transparent;
    color: HighlightText;
  }
  /* Verwijder achtergrondafbeeldingen die tekst kunnen verbergen */
  .icon {
    background-image: none;
    border: 1px solid currentColor; /* Maak ze zichtbaar */
  }
}

            

              
                Copy
              
            
          

Deze functie is van vitaal belang om te voldoen aan toegankelijkheidsnormen (zoals WCAG) en om een functionele ervaring te bieden aan gebruikers die afhankelijk zijn van deze aanpassingen op systeemniveau.

Omgevingsmediafeatures: Aanpassen aan Apparaatcapaciteiten

Deze media-features stellen je in staat om ervaringen aan te passen op basis van hoe een gebruiker met zijn apparaat omgaat, zoals het type aanwijsapparaat dat ze gebruiken of de capaciteiten van hun display.

hover en any-hover: Onderscheid Maken Tussen Aanwijsapparaten

Deze features helpen onderscheid te maken tussen apparaten die 'hoveren' ondersteunen (bijv. desktops met een muis) en apparaten die voornamelijk aanraking gebruiken (bijv. smartphones, tablets). Dit is cruciaal om frustrerende UX-patronen op apparaten die alleen aanraking ondersteunen te vermijden.

• hover: Verwijst naar het primaire invoermechanisme.
• any-hover: Verwijst naar elk beschikbaar invoermechanisme.
• Waarden: none (geen hover-ondersteuning), hover (hover-ondersteuning).

            /* Toon tooltips alleen op apparaten met hover-mogelijkheid */
.tooltip-trigger:hover .tooltip-content {
  opacity: 1;
  visibility: visible;
}

@media (hover: none) {
  /* Op touch-apparaten kunnen tooltips worden geactiveerd door focus of helemaal niet worden weergegeven */
  .tooltip-trigger:hover .tooltip-content {
    opacity: 0;
    visibility: hidden;
  }
  .touch-friendly-info-icon {
    display: block;
  }
}

            

              
                Copy
              
            
          

Het gebruik van any-hover is vaak robuuster, omdat een apparaat zowel aanraak- als muisinvoer kan hebben (bijv. een 2-in-1 laptop). Als any-hover hover is, ondersteunt ten minste één invoermethode hoveren. Als any-hover none is, ondersteunt geen enkele invoermethode hoveren.

pointer en any-pointer: Onderscheid Maken Tussen Aanwijsprecisie

Deze features detecteren de nauwkeurigheid van het primaire (pointer) of elk beschikbaar (any-pointer) aanwijsapparaat.

• none: Geen aanwijsapparaat.
• coarse: Onnauwkeurig aanwijsapparaat (bijv. vinger op een touchscreen).
• fine: Nauwkeurig aanwijsapparaat (bijv. muis, stylus).

            /* Vergroot de grootte van aanraakdoelen voor 'coarse' pointers */
@media (pointer: coarse) {
  button, .tap-area {
    min-width: 44px;
    min-height: 44px;
    padding: 12px;
  }
}

/* Verklein de padding voor 'fine' pointers */
@media (pointer: fine) {
  button, .tap-area {
    padding: 8px;
  }
}

            

              
                Copy
              
            
          

Dit is cruciaal voor het ontwerpen van aanraakvriendelijke interfaces waarbij aanraakdoelen voldoende groot moeten zijn voor vingerinvoer, terwijl een compacter ontwerp mogelijk blijft wanneer nauwkeurige muisinteractie beschikbaar is. Dit heeft directe invloed op de bruikbaarheid over een spectrum van apparaten en gebruikersvaardigheden, met name in wereldwijde markten waar touch-first apparaten veel voorkomen.

color-gamut: Voorbij sRGB

De color-gamut media-feature stelt je in staat om te detecteren of het display van de gebruiker een breder kleurengamma ondersteunt dan de standaard sRGB (bijv. P3 of Rec. 2020). Dit stelt ontwerpers in staat om een rijker, levendiger kleurenpalet te gebruiken op compatibele schermen.

• srgb: Standaard sRGB-gamma.
• p3: Display ondersteunt P3-gamma (breder dan sRGB).
• rec2020: Display ondersteunt Rec. 2020-gamma (nog breder).

            /* Gebruik P3-kleuren voor levendigere merkelementen op compatibele displays */
@media (color-gamut: p3) {
  .brand-logo {
    color: color(display-p3 0.96 0.28 0.21); /* Een levendig rood in P3 */
  }
}

            

              
                Copy
              
            
          

Hoewel nog in opkomst, wijst deze feature naar een toekomst van visueel verbluffendere en nauwkeurigere webervaringen, vooral voor creatieve industrieën of de levering van high-fidelity content.

update: Omgaan met Schermverversingssnelheden

Deze feature geeft aan hoe snel het uitvoerapparaat het uiterlijk van content kan wijzigen. Dit is handig voor het optimaliseren van animaties en dynamische content voor verschillende schermtypen.

• none: Kan niet updaten (bijv. een geprint document).
• slow: Update langzaam (bijv. e-ink displays, sommige oudere apparaten).
• fast: Update snel (bijv. typische computermonitoren, smartphones).

            /* Verminder complexe animaties op langzaam updatende displays */
@media (update: slow) {
  .complex-animation {
    animation: none;
    transition: none;
  }
  .video-background {
    display: none;
  }
}

            

              
                Copy
              
            
          

Deze feature helpt ervoor te zorgen dat gebruikers op apparaten zoals e-readers, die prioriteit geven aan batterijduur en een statisch display, geen verslechterde of schokkerige ervaring krijgen door ongepaste animaties.

Geavanceerde Technieken en Best Practices

Naast individuele media-features kan de manier waarop je je CSS structureert en deze patronen combineert, de onderhoudbaarheid, prestaties en algehele ontwerpkwaliteit aanzienlijk beïnvloeden.

Mobile-First vs. Desktop-First: Een Strategische Keuze

De keuze tussen een mobile-first en een desktop-first aanpak is fundamenteel voor de strategie van responsief ontwerp.

• Mobile-First (min-width):
  • Begin met het ontwerpen en stijlen voor het kleinste scherm (mobiel).
  • Gebruik min-width media-queries om progressief stijlen toe te voegen voor grotere schermen.
  • Voordelen:
    • Prestaties: Mobiele apparaten hebben vaak minder verwerkingskracht en langzamere internetverbindingen. Een mobile-first aanpak zorgt ervoor dat alleen de noodzakelijke stijlen in eerste instantie worden geladen, wat leidt tot snellere laadtijden van de pagina. Dit is cruciaal voor gebruikers in regio's met een ontwikkelende internetinfrastructuur.
    • Progressive Enhancement: Je bouwt voort op een solide, kernervaring en voegt verbeteringen toe voor meer capabele apparaten.
    • Focus: Moedigt ontwikkelaars aan om essentiële content en functionaliteit te prioriteren.
• Desktop-First (max-width):
  • Begin met het ontwerpen voor grote schermen (desktop).
  • Gebruik max-width media-queries om stijlen voor kleinere schermen te overschrijven.
  • Voordelen: Kan gemakkelijker zijn voor teams die gewend zijn aan traditioneel desktopontwerp, maar leidt vaak tot complexere overschrijvingen voor mobiel.

Voor de meeste moderne projecten, vooral die gericht op een wereldwijd publiek met diverse apparaatcapaciteiten en netwerkomstandigheden, wordt de mobile-first aanpak sterk aanbevolen.

            /* Mobile-first aanpak: Stijlen voor kleine schermen zijn standaard */
.container {
  width: 90%;
  margin: 0 auto;
}

@media (min-width: 768px) {
  /* Tablet-specifieke stijlen */
  .container {
    width: 700px;
  }
}

@media (min-width: 1200px) {
  /* Desktop-specifieke stijlen */
  .container {
    width: 1100px;
  }
}

            

              
                Copy
              
            
          

Gebruik van CSS Custom Properties (Variabelen) met Media Queries

Het combineren van CSS Custom Properties (variabelen) met media-queries is een game-changer voor het onderhouden van grote, responsieve stylesheets. In plaats van waarden te herhalen, definieer je ze één keer en verander je hun waarden binnen media-queries.

            /* Definieer standaard (mobiele) waarden */
:root {
  --primary-font-size: 16px;
  --spacing-unit: 1rem;
  --grid-columns: 1;
}

/* Pas waarden aan voor tabletschermen */
@media (min-width: 768px) {
  :root {
    --primary-font-size: 18px;
    --spacing-unit: 1.5rem;
    --grid-columns: 2;
  }
}

/* Pas waarden aan voor desktopschermen */
@media (min-width: 1200px) {
  :root {
    --primary-font-size: 20px;
    --spacing-unit: 2rem;
    --grid-columns: 3;
  }
}

/* Gebruik de variabelen in je hele CSS */
body {
  font-size: var(--primary-font-size);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--spacing-unit);
}
```

/* Pas stijlen toe voor schermen tussen 600px en 900px */
@media (600px <= width <= 900px) {
  .promo-box {
    flex-direction: column;
  }
}

/* Gelijkwaardig met traditionele syntaxis */
@media (min-width: 600px) and (max-width: 900px) {
  .promo-box {
    flex-direction: column;
  }
}
```

@media print {
  /* Verberg niet-essentiële elementen voor print */
  nav, footer, .sidebar, .ads {
    display: none;
  }

  /* Zorg ervoor dat de tekst zwart op wit is voor leesbaarheid */
  body {
    color: #000 !important;
    background-color: #fff !important;
    margin: 0;
    padding: 0;
  }

  /* Toon volledige URL's voor links */
  a:link:after, a:visited:after {
    content: " (" attr(href) ")";
    font-size: 90%;
  }

  /* Breek pagina's op de juiste manier af */
  h1, h2, h3 {
    page-break-after: avoid;
  }
  pre, blockquote {
    page-break-inside: avoid;
  }
}

            

              
                Copy
              
            
          

            /* Mobile-first: Standaard een verborgen, off-canvas menu */
.main-nav {
  display: none;
}

.mobile-menu-toggle {
  display: block;
}

/* Tablet & Desktop: Toon horizontaal menu */
@media (min-width: 768px) {
  .main-nav {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
  }
  .mobile-menu-toggle {
    display: none;
  }
}

/* Verdere aanpassingen voor zeer brede schermen of specifieke beeldverhoudingen */
@media (min-width: 1400px) and (min-aspect-ratio: 16/9) {
  .main-nav li {
    padding: 0 25px;
  }
}

            

              
                Copy
              
            
          

            /* Standaard (mobiel/lage resolutie) achtergrondafbeelding */
.hero-section {
  background-image: url('hero-small.jpg');
  background-size: cover;
  background-position: center;
}

/* Middelgrote resolutie/desktop achtergrondafbeelding */
@media (min-width: 768px) {
  .hero-section {
    background-image: url('hero-medium.jpg');
  }
}

/* High-DPI (Retina) specifieke achtergrondafbeelding */
@media (min-resolution: 2dppx), (min-resolution: 192dpi) {
  .hero-section {
    background-image: url('hero-large@2x.jpg');
  }
}

            

              
                Copy
              
            
          

            /* Vloeiende typografie met calc() en clamp() */
h1 {
  font-size: clamp(2rem, 5vw + 1rem, 4rem);
}

/* Pas grid aan voor tablets in landschapsmodus, met voorkeur voor meer kolommen */
@media screen and (min-width: 768px) and (orientation: landscape) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Pas letterdikte aan voor hoog contrast modus voor betere leesbaarheid */
@media (prefers-contrast: more) {
  p, li {
    font-weight: bold;
  }
}

            

              
                Copy
              
            
          

            /* Gecentraliseerde kleurvariabelen, aanpasbaar aan lichte/donkere modus */
:root {
  --background-color: #f0f0f0;
  --text-color: #333333;
  --link-color: #007bff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #222222;
    --text-color: #e0e0e0;
    --link-color: #88bbff;
  }
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
}

/* Verminder animaties indien de gebruiker dit verkiest */
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Aanpassingen voor de modus met gedwongen kleuren */
@media (forced-colors: active) {
  .custom-button {
    border: 1px solid Highlight; /* Zorg ervoor dat de randen van de knop zichtbaar zijn */
    background-color: Canvas;
    color: CanvasText;
  }
}

            

              
                Copy
              
            
          

            /* Voorbeeld van een toekomstige Container Query */
.card-container {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .product-card {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}

            

              
                Copy